<template>
	<!-- 购物车 -->
	<view class="public">
		<view class="box" v-if="list.length">
			<view class="guanli" @click="cli(true)">{{ show == true ? '完成' : '管理' }}</view>
		</view>
		<view class="totlechild">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="card" @click="gotodetail(item.goods_id)">
					<view class="" @click.stop="danxuan(item)">
						<image src="@/static/smallIcon/select.png" mode="" v-show="item.ischeck" class="selectimg">
						</image>
						<image src="@/static/smallIcon/noselect.png" mode="" v-show="!item.ischeck" class="selectimg">
						</image>
					</view>
					<view class="top" style="width: 100%;">
						<image :src="item.goods.image_text" mode=""></image>
						<view class="detailed" style="height: 180rpx;width: 100%;">
							
							<view class="blod xiankuan">{{ item.title }}</view>
							<view class="flexbetween" style="width: 100%;">
								<view class="xiaohuang" v-if="item.sku.difference_type==1">{{ item.goods.biggoodsunit.name}}</view>
								<view class="xiaohuang" v-if="item.sku.difference_type==2">{{ item.goods.middlegoodsunit.name}}</view>
								<view class="xiaohuang" v-if="item.sku.difference_type==3">{{ item.goods.smallgoodsunit.name}}</view>
								<view class="xiaohuang">积分:{{ item.sku.buy_send_score }}积分</view>
							</view>
							<view class="price">￥{{item.sku.prev_xs_price?item.sku.prev_xs_price:item.sku.price}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="">
						<view class="bottom-box">共: 1种{{ item.number }}件</view>
					</view>
					<view class="flexbetween bghui radius" style="padding: 10rpx;">
						<view class="reduceimg" @click="minus(item)"></view>
						<input type="number" min="1" style="width: 150rpx; text-align: center;" v-model="item.number"  @blur="plus(item,2)">
						<view class="addimg" @click="plus(item)"></view>
					</view>
					<!-- <view class="jiajian">
						<view class="jianhao" @click="minus(item)">
							<view class="line"></view>
						</view>
						<input type="number" min="1" v-model="item.number" class="xhtext" @blur="plus(item,2)">
						<view class="jiahao" @click="plus(item)"></view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 如果购物车为空 -->
		<view class="flexcenter" style="margin-top: 300rpx;" v-if="!list.length">
			<view class="placeholderimage"></view>
		</view>
		<!-- 全选 -->
		<view class="select" v-if="list.length">
			<template v-if="!show">
				<view class="foot-total">
					<view class="foot-num" @click="goconfirm">已选{{num}}种，{{allnum}}件，赠送<text style="color: #f5ac4f;">{{allscore}}</text>积分，</view>
					<view class="foot-count">合计：<text style="	color: #1ED76D;">￥{{allprice}}</text></view>
				</view>
			</template>
			<view class="flexbetween margin_top">
				<view class="allSelect" @click="checkeds">
					<image src="@/static/smallIcon/select.png" mode="" v-show="checkAll" class="selectimg"></image>
					<image src="@/static/smallIcon/noselect.png" mode="" v-show="!checkAll" class="selectimg"></image>
					<view class="quanxuan">全选</view>
				</view>
				<view class="del" @click="del" v-if="show">删除</view>
				<view class="del" v-if="!show" @click="goToShopping">下单结算</view>
			</view>
		</view>
		<tabbar current=2 ref="cars"></tabbar>
	</view>
</template>

<script>
	const httpRequest = require("@/commonFun/httpRequest.js");
	export default {
		data() {
			return {
				num: 0,
				allnum: 0,
				allprice: 0,
				allscore: 0,
				show: false, // 显示下面的全选
				checkAll: false, // 全选
				items: [],
				list: [],

			};
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
		},
		onShow() {
			// 判断是否登录
			// this.setcart();
			if (httpRequest.checkIsLogin()) {
				this.getCartData(); //获取购物车数据
			}
		},
		watch: {
			list: {
				deep: true,
				handler(newval) {
					let num = 0
					let allnum = 0
					let allprice = 0
					let allscore = 0
					newval.forEach(item => {
						if (item.ischeck) {
							// console.log(item.number * Number(item.sku.prev_xs_price)?Number(item.sku.prev_xs_price):Number(item.sku.price),"982349");
							num = num + 1
							allnum = Number(allnum) + Number(item.number)
							allprice = Number(allprice) + item.number * (Number(item.sku.prev_xs_price)?Number(item.sku.prev_xs_price):Number(item.sku.price))
							allscore = Number(allscore) + item.number * item.sku.buy_send_score
						}
					})
					// console.log(allprice,"999");
					if (num == this.list.length) {
						this.checkAll = true
					} else {
						this.checkAll = false
					}
					this.num = num
					this.allnum = allnum
					this.allprice = allprice
					this.allscore = allscore
				}
			}
		},
		methods: {
			getCartData() {
				let _this = this;
				httpRequest.request('/customapi/cart/cartList', 'GET', {}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							_this.$set(item, "ischeck", true);
						})
						_this.list = res.data;
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			//点击详情
			gotodetail(id) {
				uni.navigateTo({
					url: '/pages/index/commodityDetail/commodityDetail?id=' + id
				})
			},
			// 点击购买
			goToShopping() {
				let _this = this;
				let data = {
					ly_type:"cart",//来源，detail详情，cart购物车
					order_type: 1,
					data: []
				}
				this.list.forEach(item => {
					if (item.ischeck) {
						data.data.push({
							goods_id: item.goods_id,
							num: item.number,
							goods_sku_id: item.sku_id,
							goods_type: 1,
							user_coupon_id: "",
							price: item.sku.prev_xs_price?item.sku.prev_xs_price:item.sku.price,
						})
					}
				})
				if (data.data.length == 0) {
					httpRequest.toast('请选择您要购买的商品')
					return false
				}
				uni.navigateTo({
					url: "/pages/shoppingCart/orderDetail?data=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 删除
			del() {
				let _this = this;
				let arr = []
				this.list.forEach(item => {
					if (item.ischeck) {
						arr.push({
							goods_id: item.goods_id,
							sku_id: item.sku_id
						})
					}
				})
				httpRequest.request('/customapi/cart/delCart', 'POST', {
					data: arr,
				}).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						_this.getCartData();
						this.$refs.cars.getlist()
					}
				})
			},
			// 单选
			danxuan(item) {
				if (item.ischeck) {
					item.ischeck = false
				} else {
					item.ischeck = true
				}
			},
			// 全选
			checkeds() {
				if (this.checkAll) {
					this.list.forEach(item => {
						item.ischeck = false
					})
				} else {
					this.list.forEach(item => {
						item.ischeck = true
					})
				}

			},
			setcart() {
				let _this = this;
				let prices = 0;
				let nums = 0;
				_this.goodsInfo.forEach(item => {
					if (item.ischeck) {
						prices += item.goods.price * item.number
						nums += item.number;
					}
				})
				_this.price = prices;
				_this.num = nums;
			},
			// 增加时触发
			plus(e, value) {
				let _this = this;
				if (value != 2) {
					e.number++;
				}
				if (e.number == 0) {
					e.number = 1
				}
				httpRequest.request('/customapi/cart/clCart', 'POST', {
					goods_id: e.goods_id,
					sku_id: e.sku_id,
					number: e.number,
				}).then(res => {
					if (res.code != 1) {
						httpRequest.toast(res.msg);
					}
				})
			},
			// 减少时触发
			minus(e) {
				let _this = this;
				if (e.number == 1) {
					return
				}
				e.number--;
				httpRequest.request('/customapi/cart/clCart', 'POST', {
					goods_id: e.goods_id,
					sku_id: e.sku_id,
					number: e.number,
				}).then(res => {
					if (res.code != 1) {
						httpRequest.toast(res.msg);
					}
				})
			},
			cli(e) {
				if (e) {
					this.show = !this.show;
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.bghui {
		background-color: #f7f7f6;
	}
	
		.reduceimg {
			width: 50rpx;
			height: 50rpx;
			background-image: url("@/static/userOrder/reduceimg.png");
			background-size: 100% 100%;
		}
	
		.addimg {
			width: 50rpx;
			height: 50rpx;
			background-image: url("@/static/userOrder/addimg.png");
			background-size: 100% 100%;
		}
	.blod {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.public {
		padding-bottom: 50px;
	}

	.select {
		z-index: 1000;
		padding: 15px 10px;
		background-color: #ffffff;
		overflow: hidden;
		font-size: 28rpx;
		position: fixed;
		bottom: 150rpx;
		width: 95vw;

		.selectOne {
			color: #999999;
		}

		.allSelect {
			color: #999999;
			display: flex;
			align-items: center;
		}

		.del {
			padding: 10rpx 30rpx;
			background-color: #f5ac4f;
			color: #ffffff;
			font-size: 36rpx;
			border-radius: 20px;
		}

		.notdel {
			padding: 3px 15px;
			background-color: #f5ac4f;
			color: #ffffff;
			border-radius: 20px;
		}
	}

	.item {
		padding: 30rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
		background-color: #ffffff;

		.card {
			font-size: 28rpx;
			display: flex;
			align-items: center;
			padding: 10px;

			.top {
				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8px;
					margin-right: 10px;
					flex-shrink: 0;
					margin-left: 5px;
				}

				.detailed {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					.price {
						color: #ff0000;
					}
				}
			}
		}

		.bottom {
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px 5px 10px;
		}
	}

	.totlechild {
		width: 680rpx;
		margin: 0 auto;
		padding-bottom: 219rpx;
	}

	.box {
		display: flex;
		justify-content: flex-end;
		padding: 10rpx;
		position: sticky;
		top: 0;
		z-index: 10000;

		.guanli {
			width: 70rpx;
			background-color: #ffffff;
			padding: 6px 12px;
			border-radius: 20px;
			font-size: 32rpx;
		}
	}

	.foot-total {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.foot-num {
		font-size: 32rpx;
		color: #999999;
	}

	.radio {
		border-radius: 30rpx;
	}

	.bottom-box {
		padding: 0 0 0 60rpx;
		color: #999999;
	}

	.kongcar {
		width: 400rpx;
		margin: 50rpx auto;

		.kongcar_img image {
			width: 100%;
		}

		.kongcar_text {
			font-weight: bold;
			font-size: 36rpx;
			color: #999999;
			text-align: center;
			margin-top: 40rpx;
		}

		.kongcar_texttwo {
			text-align: center;
			font-size: 32rpx;
			color: #999999;
		}
	}

	.selectimg {
		width: 49rpx;
		height: 49rpx;
	}

	.quanxuan {
		font-size: 32rpx;
		color: #333;
		margin-left: 10rpx;
	}
</style>